<template>
  <div id="app">
    <van-cell-group>
      <van-cell title="姓名" :value="name" />
      <van-cell title="公司名称" :value="work_name" />
    </van-cell-group>

    <van-form>
      <div style="padding: 10px 10px">
      
        <div class="mb10">
          <div class="mb10"><span>国家个人所得税app截图</span><span>共<span style="color: red">{{list1.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list1" @delete="deleteInformation" multiple accept=".png,.jpg" :after-read="grsdsHandler" />
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>社保个人账户截图</span><span>共<span style="color: red">{{list2.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list2" @delete="deleteInformation" multiple accept=".png,.jpg" :after-read="sbgrHandler" />
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>公积金个人账户截图</span><span>共<span style="color: red">{{list3.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list3" :after-read="gjjHandler" multiple @delete="deleteInformation" accept=".png,.jpg"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>学历资料(学信网截图)</span><span>共<span style="color: red">{{list5.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list5" :after-read="xlzlHandler" multiple @delete="deleteInformation" accept=".png,.jpg"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>税后工资(银行APP截图)</span><span>共<span style="color: red">{{list6.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list6" :after-read="shgzHandler" multiple @delete="deleteInformation" accept=".png,.jpg"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>婚姻证明</span><span>共<span style="color: red">{{list7.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list7" :after-read="hyzmHandler" multiple @delete="deleteInformation" accept=".png,.jpg"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>房产证查档和官司</span><span>共<span style="color: red">{{list8.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list8" :after-read="fczcdHandler" multiple @delete="deleteInformation" accept=".png,.jpg"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>银行卡</span><span>共<span style="color: red">{{list9.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list9" :after-read="yhkHandler" multiple @delete="deleteInformation" accept=".png,.jpg"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>征信报告</span><span>共<span style="color: red">{{list4.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list4" :after-read="zxbgHandler" @click-preview="viewZxbg" @delete="deleteInformation" :preview-full-image="false" accept=".pdf"/>
          </div>
        </div>

        <div class="mb10">
          <div class="mb10"><span>其他pdf</span><span>共<span style="color: red">{{list10.length}}</span>份</span></div>
          <div>
            <van-uploader v-model="list10" :after-read="qtpdfHandler" @click-preview="viewZxbg" @delete="deleteInformation" :preview-full-image="false" accept=".pdf"/>
          </div>
        </div>

      </div>
    </van-form>
  </div>
</template>
<script>
import {uploadFile,loadCustom,editCustomInformation,loadCustomInformationList,deleteCustomInformation} from './api/api';
export default {
  name: "App",
  components: {},
  data() {
    return {
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      list7: [],
      list8: [],
      list9: [],
      list10: [],
      custom_id:'',
      request_time:'',
      sign:'',
      name:'',
      work_name:'',
    };
  },
  created:function(){
    this.custom_id = this.getUrlParam('custom_id');
    this.request_time = this.getUrlParam('request_time');
    this.sign = this.getUrlParam('sign');
    this.getLoadCustom();
    this.getInformationList();
  },
  methods: {
    getLoadCustom(){
      loadCustom({
        custom_id:this.custom_id,
        request_time:this.request_time,
        sign:this.sign
      }).then(res => {
        if(res.data.code == 1){
          this.name = res.data.data.name;
          this.work_name = res.data.data.work_name;
        }else{
          this.$notify({ type: 'danger', message: res.data.msg });
        }
      })
    },
    grsdsHandler(fileList) {
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:1
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(1);
              }
            })
          }
        })
      }
    },
    sbgrHandler(fileList) {
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:2
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(2);
              }
            })
          }
        })
      }
    },
    gjjHandler(fileList) {
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:3
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(3);
              }
            })
          }
        })
      }
    },
    zxbgHandler(file) {
      uploadFile(file.file).then(res => {
        if(res.data.code == 1){
          editCustomInformation({
            custom_id:this.custom_id,
            request_time:this.request_time,
            sign:this.sign,
            file_url:res.data.data.src,
            type:4
          }).then(res => {
            if(res.data.code == 1){
              this.$notify({ type: 'success', message: '上传成功' });
              this. getInformationList(4);
            }
          })
        }
      })
    },
    qtpdfHandler(file){
      uploadFile(file.file).then(res => {
        if(res.data.code == 1){
          editCustomInformation({
            custom_id:this.custom_id,
            request_time:this.request_time,
            sign:this.sign,
            file_url:res.data.data.src,
            type:10
          }).then(res => {
            if(res.data.code == 1){
              this.$notify({ type: 'success', message: '上传成功' });
              this. getInformationList(10);
            }
          })
        }
      })
    },
    fczcdHandler(fileList){
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:8
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(8);
              }
            })
          }
        })
      }
    },
    yhkHandler(fileList){
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:9
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(9);
              }
            })
          }
        })
      }
    },
    viewZxbg:function(file){
      window.location.href = "http://159.75.118.116:1010/pdfjs/web/viewer.html?file=" + file.file_url;
    },
    xlzlHandler(fileList) {
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:5
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(5);
              }
            })
          }
        })
      }
    },
    shgzHandler(fileList){
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:6
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(6);
              }
            })
          }
        })
      }
    },
    hyzmHandler(fileList){
      for(let i = 0;i < fileList.length;i++){
        let file = fileList[i];
        uploadFile(file.file).then(res => {
          if(res.data.code == 1){
            editCustomInformation({
              custom_id:this.custom_id,
              request_time:this.request_time,
              sign:this.sign,
              file_url:res.data.data.src,
              type:7
            }).then(res => {
              if(res.data.code == 1){
                this.$notify({ type: 'success', message: '上传成功' });
                this. getInformationList(7);
              }
            })
          }
        })
      }
    },
    deleteInformation(file, index){
      deleteCustomInformation({
        custom_id:this.custom_id,
        request_time:this.request_time,
        sign:this.sign,
        id:file.id,
        type:file.type
      }).then(res => {
        if(res.data.code == 1){
          this.$notify({ type: 'success', message: '删除成功' });
          this.getInformationList(file.type);
        }else{
          this.$notify({ type: 'danger', message: res.data.msg });
        }
      })
    },
    getInformationList:function(type){
      loadCustomInformationList({
        custom_id:this.custom_id,
        request_time:this.request_time,
        sign:this.sign,
        type:type
      }).then(res => {
        if(res.data.code == 1){
          switch(type){
            case 1:
              this.list1 = res.data.data.list1;
              console.log(this.list1);
              break;
            case 2:
              this.list2 = res.data.data.list2;
              break;
            case 3:
              this.list3 = res.data.data.list3;
              break;
            case 4:
              this.list4 = res.data.data.list4;
              break;
            case 5:
              this.list5 = res.data.data.list5;
              break;
            case 6:
              this.list6 = res.data.data.list6;
              break;
            case 7:
              this.list7 = res.data.data.list7;
              break;
            case 8:
              this.list8 = res.data.data.list8;
              break;
            case 9:
              this.list9 = res.data.data.list9;
              break;
            case 10:
              this.list10 = res.data.data.list10;
              break;
            default:
              this.list1 = res.data.data.list1;
              this.list2 = res.data.data.list2;
              this.list3 = res.data.data.list3;
              this.list4 = res.data.data.list4;
              this.list5 = res.data.data.list5;
              this.list6 = res.data.data.list6;
              this.list7 = res.data.data.list7;
              this.list8 = res.data.data.list8;
              this.list9 = res.data.data.list9;
              this.list10 = res.data.data.list10;
              break;
          }
        }
      })
    },
    //获取url中的参数
    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    },
  }
};
</script>

<style lang="less" scoped>
  .flex {
    display: flex;
  }
  .a-sp {
    justify-content: space-between;
  }
  .mb10 {
    margin-bottom: 10px;
  }
</style>
